<script setup>
import MoonNav from '@/components/MoonNav.vue';
import MoonBaner from '@/components/MoonBaner.vue';
</script>

<template>
  <MoonNav></MoonNav>
  <MoonBaner></MoonBaner>

  <div class="moon-hos"></div>

  <!-- tab栏目 start -->
  <div class="moon-tab">
    <ul class="tab-nav">
      <li class="green">
        <router-link to="/threeplanet">
          <i class="iconfont icon-wodewenjuan"></i>
          常考
        </router-link>
      </li>
      <li class="orange">
        <router-link to="/threeplanet">
          <i class="iconfont icon-suanfaku"></i>
          算法
        </router-link>
      </li>
      <li class="pink">
        <router-link to="/threeplanet">
          <i class="iconfont icon-bishi"></i>
          笔试
        </router-link>
      </li>
      <li class="blue">
        <router-link to="/threeplanet">
          <i class="iconfont icon-shipinmianshi"></i>
          面试
        </router-link>
      </li>
    </ul>
    <div class="tab-context">
      <router-view></router-view>
    </div>
  </div>
  <!-- tab栏目 end -->
  <!-- <p>版权|归属地|copy|金属</p> -->
</template>



<style lang="less" scoped>
.moon-hos {
  width: 1300px;
  height: 100px;
  border-radius: 20px;
  margin: 20px auto;
  display: flex;
  justify-content: start;
  align-items: center;
  background: linear-gradient(to right, rgb(78, 78, 220), rgb(115, 210, 164));
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.274);
}

// 色域
.green {
  background: #23d5ab;
}

.orange {
  background: #ee7752;
}

.pink {
  background: #e73c7e;
}

.blue {
  background: #23a6d5;
}

.moon-tab {
  width: 1300px;
  // height: 800px;
  // border-radius: 20px;
  margin: 10px auto;
  // background: pink;
  overflow: hidden;
  // box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);

  .tab-nav {
    width: 1300px;
    height: 100px;
    border-radius: 20px;
    display: flex;
    justify-content: start;
    align-items: center;

    li {
      flex-shrink: 0;
      width: 60px;
      height: 60px;
      font-size: 16px;
      border-radius: 50px;
      text-align: center;
      margin-left: 10px;
      border-radius: 50%;


      a {
        height: 20px;
        display: block;
        color: #ffffff;

        i {
          font-size: 18px;
          height: 20px;
          display: block;
          margin-top: 2px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>